/**
 * @name FlowMedia
 * @desc 瀑布流-视频/图片
 */

import Taro from "@tarojs/taro"
import { Image, View, Video } from "@tarojs/components"
import { numberFixed } from "@/utils"

import "./styles.less"

const icoPlay = require("@/assets/icons/play.png")

class FlowMedia extends Taro.Component {
    static defaultProps = {
        mediaWidth: 0,
        data: {
            id: "",
            path: "",
            width: 0, // 媒体类型为图片时有效
            height: 0, // 媒体类型为图片时有效,
            cover: "" // 视频封面url
        }
    }

    state = {
        mediaHeight: 0
    }

    componentWillMount() {
        this.setMediaSize()
    }

    setMediaSize() {
        const { width, height } = this.props.data
        const { mediaWidth } = this.props
        // 判断是否有宽高
        const mediaHeight = width && height ? numberFixed((height * mediaWidth) / width) : mediaWidth
        this.setState({ mediaHeight })
    }

    render() {
        const { path, cover, width, height } = this.props.data
        const isImage = width && height
        const { mediaWidth } = this.props
        const { mediaHeight } = this.state

        return isImage ? (
            <Image
                className="flow-media__flow-image"
                mode="aspectFit"
                src={path}
                lazyLoad={true}
                style={{ width: mediaWidth + "rpx", height: mediaHeight + "rpx" }}
            />
        ) : (
            <View className="flow-media__flow-film-wrapper">
                <Image
                    className="flow-media__flow-film__cover"
                    mode="aspectFit"
                    lazyLoad={true}
                    src={cover}
                    style={{ width: mediaWidth + "rpx", height: mediaHeight + "rpx" }}
                />
                <Image className="flow-media__flow-film__poster" src={icoPlay} mode="aspectFit" />
            </View>
        )
    }
}

export { FlowMedia }
